import xcn from 'xcn';
import { useTodoStore } from '../store/useTodoStore';

export const Filters = () => {
  const { filter, setFilter, todos, clearCompleted } = useTodoStore();

  const activeCount = todos.filter(t => !t.completed).length;

  return (
    <div className="filters">
      <span className="count">{activeCount} 项代办</span>
      <div className="buttons">
        {(['all', 'active', 'completed'] as const).map(f => (
          <button
            key={f}
            className={xcn(filter === f && 'active')}
            onClick={() => setFilter(f)}
          >
            {f === 'all' ? '全部' : f === 'active' ? '进行中' : '已完成'}
          </button>
        ))}
      </div>
      <button className="clear-btn" onClick={clearCompleted}>
        清理已完成
      </button>
    </div>
  );
};